<?
// load the imageShield and 2 preselected categories
include('imageshield.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>VidoopSecure Demo - Enrollment Start</title>
        <link rel="stylesheet" href="css/base.css" type="text/css" media="all">
    </head>
    <body id="enroll">
        <div id="container">
            <div id="header">
                <a class="logo" href="enroll.php"></a>
                <h1>MySite Enrollment</h1>
            </div>
            <div id="content">
                <div id="instructions">
                    <ol>
                        <li>We've chosen 2 categories for you</li>
                        <li>Find the letters associated with the <span class="cat1"><?=$category_name_1?></span> and then the <span class="cat2"><?=$category_name_2?></span> pictures.</li>
                        <li>Type the letters in the "Access Code" field and click "Submit" to complete enrollment.</li>
                    </ol>
                </div>

                <div id="imageshield_wrapper">
                    <div id="your_categories">Your categories are: <span class="cat1"><?=$category_name_1?></span> and then <span class="cat2"><?=$category_name_2?></span></div>
                    <div id="imageshield_border">
                        <div id="imageshield">
                            <img alt='ImageShield' src="<?=$imageShield_URI?>" />
                        </div>
                        
                        <div id="access_code_wrapper">
                            <form id="access_code_form" method="post" action="enroll.php">
                                <input id="imageshield_id" name="imageshield_id" type="hidden" value="<?=$imageShield_id?>" />
                                <label for="access_code">Access Code: </label>
                                <input id="access_code" maxlength="2" name="access_code" type="text" />
                                <input id="submit" name="submit" type="button" value="Submit" />
                            </form>
                        </div>
                        <div style="clear:both"></div>
                        <div style="display: none;" class="message"></div>
                    </div>
                    <div id="category_options_wrapper">
                        <a id="category_options" href="">I don't like these categories</a>
                        <ul id="category_options_menu">
                            <li>
                                <a id="different_categories" href="#">Pick different categories for me</a>
                            </li>
                            <li>
                                <a href="selection.php">I want to pick my own categories</a>
                            </li>
                        </ul>
                    </div>
                </div>                        
            </div>
            <div id="footer">&copy;<?= date('Y');?></div>
        </div>
        <script type="text/javascript" src="js/jquery-1.3.min.js"></script>
        <script type="text/javascript" src="js/enroll.js"></script>
    </body>
</html>
